import './index.scss';

import React from 'react';

import Collapse from '../../Components/Collapse';
import Footer from '../../Components/Footer';
import Header from '../../Components/Header';
import NftCard from '../../Components/NftCard';

const ListData = [
  {
    id: 0,
    title: "Node Founder #1",
    price: 3.8,
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. dolore eu fugiat nulla pariatur.",
  },
  {
    id: 1,
    title: "Node Founder #2",
    price: 6.8,
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. dolore eu fugiat nulla pariatur.",
  },
];

const Nfts = (props) => {
  const ches = () => {
    this.props.history.push("/faqs");
  };

  return (
    <div>
      <Header />
      {/* NFTs */}
      <div className="nfts">
        {/* banner */}
        <div className="Banner">
          <div className="Banner-img"></div>
        </div>
      </div>
      {/* NFT UTILITY */}
      <div className="nft-utility">
        <div className="nft-utility-main">
          <div className="nft-utility-header">
            <p>NFT UTILITY</p>
            <h3>
              We are offering two unique NFTs to bring value for our holders.
              Collector holders have the sole rights to produce Nodes, limited
              to 250 units. Founder holders have rights to stay at our corporate
              Nodes.{" "}
            </h3>
          </div>
          {/* NFT mobile show */}
          <div className="nft-utility-List">
            <NftCard ListData={ListData} />
          </div>
        </div>
      </div>
      {/*Asked Questions */}
      <div className="asked-questions">
        <div className="asked-questions-title">
          Frequently
          <br /> Asked Questions
        </div>
        <div className="asked-questions-main">
          <Collapse></Collapse>
          <button onClick={() => ches()}>All Questions</button>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Nfts;
